<script  lang="ts" setup>
import { avatar } from "../../../assets/files";
defineProps(["columnJson", "userInfoJson"]);
</script>
<template>
  <div>
    <div class="henderBg">
      <div class="backMaxwrap">
        <div class="backWrap">
          <span class="iconfont iconLeft">&#xe61e;</span>
        </div>
      </div>
    </div>
    <div class="userWrap">
      <div class="headerWrap">
        <img :src="avatar" class="headerImg" />
        <span class="userName">{{ $props.userInfoJson.name }}</span>
        <div class="tagWarp">
          <span class="tagName">{{$props.userInfoJson.qianyueStatus === 1 ? '已签约' : '未签约'}}</span>
        </div>
      </div>
      <div class="fnItemWrap">
        <div v-for="(x,i) in $props.columnJson" :key="i" class="fnItem" @click="x.fn()">
          <div class="iconWrap" :style="{backgroundColor:x.bgcolor}">
            <span
              :style="{color:x.color,fontSize:26+'px'}"
              class="iconfont iconSty"
              v-html="x.icon"
            ></span>
          </div>
          <span class="label">{{ x.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.backMaxwrap {
  padding-top: 12px;
}
.backWrap {
  width: 32px;
  height: 32px;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 32px;
  margin-left: 12px;
}

.henderBg {
  height: 10rem;
  width: 100%;
  background-color: #49b8af;
}

.userWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 240px;
  background-color: white;
  margin: -60px 12px 0 12px;
  border-radius: 8px;
}

.headerImg {
  width: 6rem;
  height: 6rem;
  border-radius: 6rem;
  border: 4px solid white;
}

.headerWrap {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: -40px;
}

.tagWarp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 24px;
  border: 1px solid #9ac3bd;
  background-color: #e0fbf8;
  border-radius: 4px;
}

.tagWarp {
  color: #9ac3bd;
  font-size: 12px;
}

.userName {
  font-size: 18px;
  color: #111111;
  margin: 4px 0 4px 0;
}

.fnItemWrap {
  width: 100%;
  display: flex;
  margin-top: 24px;
}

.fnItem {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label {
  font-size: 14px;
  color: #333;
  margin-top: 4px;
}

.iconWrap {
  width: 54px;
  height: 54px;
  border-radius: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
